<template>
  <div class="search">
    <!-- 顶部NvaBar -->
    <van-nav-bar 
      left-text="搜索"
      right-text="···"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 搜索框 -->
    <div class="search_input">
      <input type="text" placeholder="输入商家 商品名称" v-model="inputValue" >
      <span @click="SearchGood">搜索</span>
    </div>
    <!-- 历史搜索部分 -->
    <TextSearch v-if="dispaly"></TextSearch>
    <!-- 商品搜索部分 -->
    <ShopSearch v-else :goodlist="goodlist"></ShopSearch>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
// 导入封装好的函数
import {shop_search} from '../utils/api'
// 导入商品部分组件，和历史搜索部分组件
import TextSearch from './Search/TextSearch.vue'
import ShopSearch from './Search/ShopSearch.vue'

export default {
  data(){
    return{
      // 定义一个变量用来接收输入框输入的值
      inputValue:'',
      goodlist:[], //用来存储请求响应的数据
      dispaly:true, // 用来控制搜索界面显示的组件
    }
  },
  components:{
    TextSearch,
    ShopSearch
  },
  methods:{
    SearchGood(){ //点击搜索用传入的值来发请求
      if(this.inputValue){
        shop_search({searchkey:this.inputValue}).then((res)=>{
          if(res.data.code==200){
              this.goodlist=res.data.list
              this.dispaly=false
            }
        })
        this.search(this.inputValue)
      }
    },
    ...mapMutations(['search'])
  },
  computed:{
    ...mapState(['history'])
  }
}
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .search_input{
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding: 0 16px ;
  }
  .search_input input{
    height: 30px;
    width: 85%;
    background: #f5f5f5;
    border: none;
    outline: none;
    padding-left:10px;
    border-radius: 15px;
    font-size: 14px;
  }
  .search_input span{
    line-height: 30px;
    text-align: center;
    color: rgb(32, 148, 232);
    font-size: 14px;
  }


</style>